
<template>
  <div class='BaseUserRole_create'>
     <div class="time" style="text-align:right">{{dateFormat(date)}}</div>
    <div class="back" >
     <el-page-header @back="goBack" content="新增ID"></el-page-header>
    </div>
    <el-form label-width="60px" size="small">
      <el-form-item label="用户ID">
      <el-input v-model="form.userId"></el-input>
    </el-form-item>
    <el-form-item label="角色ID">
      <el-input v-model="form.roleId" ></el-input>
    </el-form-item>
    <el-form-item style="text-align:right" >
      <el-button type="primary" @click="submitHandler" icon="el-icon-circle-check">提交</el-button>
    </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { post } from '@/utils/request';
export default {
   //显示当前日期时间
  mounted() {
          let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
          this.timer = setInterval(() => {
           _this.date = new Date(); // 修改数据date
           }, 1000)
       },
      beforeDestroy() {
       if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
      }
},
  props: {},
  // 组件状态值
  data () {
   return {
      date:new Date(),
     form:{}
   }
  },
  methods: {
    //时间
     dateFormat(time) {
          var date=new Date(time);
          var year=date.getFullYear();
          /* 在日期格式中，月份是从0开始的，因此要加0
          * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
          * */
          var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
          var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
          var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
          var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
          var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
          // 拼接
          return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
      },
    submitHandler(){
      //获取参数
      let url="http://121.196.106.124:8888/userRole/saveOrUpdate"
      post(url,this.form).then(resp =>{
        //提示用户录入完成
        this.$message({type:"success",message:resp.message})
        //返回，展示
        this.goBack();
      })
    },
    
    goBack(){
      this.$router.back();
    }
  },
  
  created () {
   //获取路由参数

   //参数绑定this.form
   this.form =this.$route.query;
   
  },
 
  
}
</script>

<style scoped>
.back{
  margin-bottom:30px;
};
.time{
    margin-bottom: 5px;
  }
</style>
